<!-- 

1、Webpack 是一个模块打包器, 前端资源模块化构建工具

Entry（入口）：指定 Webpack 从哪个文件开始构建依赖图。
Output（输出）：指定打包后的文件输出位置和命名。
Loader（加载器）：让 Webpack 能够处理非 JavaScript 文件（如 .css、.scss、.png、.ts 等），将其转换为有效的模块。
Plugin（插件）：用于执行更广泛的任务，如优化打包、资源管理、注入环境变量等。
Mode（模式）：提供 development、production 等预设配置，优化构建结果

2、解决了什么问题
1模块化支持不足
    浏览器原生不支持模块化（ES Module 出现之前），开发者难以组织大型项目。Webpack 支持 CommonJS、AMD、ES6 Module 等多种模块规范，让开发者可以像写 Node.js 一样组织代码。
2资源管理混乱
    前端项目包含 JS、CSS、图片、字体等多种资源，传统方式通过多个 <script> 和 <link> 标签引入，容易造成依赖混乱、加载顺序错误。Webpack 将所有资源视为模块，统一管理和打包。
3开发效率低下
    手动合并、压缩、版本控制文件效率低。Webpack 支持自动化构建流程，包括：
    代码压缩（UglifyJS、Terser）
    CSS 提取与压缩
    图片 Base64 内联
    代码分割（Code Splitting）和懒加载
    热更新（HMR, Hot Module Replacement）
4无法使用现代 JavaScript/CSS 语法
    Webpack 结合 Babel、PostCSS 等工具，可以将 ES6+、TypeScript、JSX、Sass/LESS 等现代语法转换为浏览器兼容的代码。
5依赖关系复杂难维护
    Webpack 自动解析模块之间的依赖关系，构建依赖图，确保模块按正确顺序加载。
6提升性能和用户体验
    支持 Tree Shaking（移除未使用的代码）
    按需加载（Lazy Loading）
    缓存优化（通过 contenthash）
    分离 vendor（第三方库）和业务代码

-->